import React, { PureComponent } from 'react';
import {
  Button,
  Icon,
  Row,
  Col,
  Input,
} from 'antd';

export default class Spec extends PureComponent {
  state = {
    paramsData: [], //商品参数数据
  };
  bindAddParams = ()=>{
    const paramsData = [...this.state.paramsData];
    paramsData.push({
      key : '',
      value : ''
    });
    this.setState({
      paramsData
    });
  };
  bindDelParams = (index)=>{
    const paramsData = [...this.state.paramsData];
    paramsData.splice(index,1);
    this.setState({
      paramsData
    });
  };
  bindParamsInput = (type,e,index)=>{
    //e.preventDefault();
    const paramsData = [...this.state.paramsData];
    if(type == 'value'){
      const key = paramsData[index].key;
      paramsData.splice(index,1,{key : key ,value : e.target.value});
    }else{
      const value = paramsData[index].value;
      paramsData.splice(index,1,{key : e.target.value,value :value});
    }
    this.setState({
      paramsData
    });
    this.props.onChange(paramsData);
  };
  componentWillReceiveProps(props){
    this.setState({
      paramsData : props.data
    });
  };
  render(){
    const { paramsData } = this.state;
    return <div>
      {
        paramsData.map((v,i)=>{
          return <Row gutter={8} key={`${i}`}>
            <Col span="10"><Input placeholder="参数名" value={v.key} onChange={(e)=>{this.bindParamsInput('key',e,i)}}></Input></Col>
            <Col span="1">-</Col>
            <Col span="10"><Input placeholder="参数值" value={v.value} onChange={(e)=>{this.bindParamsInput('value',e,i)}}></Input></Col>
            <Col span="1" onClick={()=>{this.bindDelParams(i)}}><Icon type="close-circle-o" /></Col>
          </Row>
        })
      }
      <Button onClick={this.bindAddParams}>添加</Button>
    </div>
  }
}
